<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="browser_components/jquery/dist/jquery.min.js"></script>
</head>
<body>
    <form id="demoForm" >
        <input type="file" name="uploadFile" id="uploadFile"><br>
        <input type="submit" value="文件上传"/>
    </form>

    <img src="" width="500" id="img"/>
<script>
    $("#demoForm").submit(function (){
        // 根据ID 获取 file元素JS对象。
        let uploadFile1 = document.getElementById("uploadFile");
        // 获取 file 元素的 file 数组
        let files = uploadFile1.files ;
        if( files.length > 0 ){
            //拿到用户选择的第一个文件
            let file = files[0];
            uploadFile( file );
        }else{
            alert("至少选择一个文件");
        }
        return false;
    })
    function uploadFile( file ){
        let form = new FormData();
        form.append("uploadFile", file );
        $.ajax({
            url:"/upload/file",
            method:"post",
            data: form ,
            contentType:false,
            processData:false,
            success:function (result) {
                alert("success")
                if(result.code == 200){
                    alert(result.message);
                    $("#img").attr("src", result.message)
                }else{
                    alert(result.message);
                }
            }
        })
    }


</script>
</body>
</html>